//加载图片
var loader = (function() {
        var queue = new createjs.LoadQueue(false);
        var manifest = [{
                        src: "images/bg1.jpg",
                        id: 'bg'
                },
                {
                        src: "images/button6.png",
                        id: "btnInit"
                },
                {
                        src: "images/button12.png",
                        id: "closeMenu"
                },
                {
                        src: "images/guanbi.png",
                        id: "closeIcon"
                }
        ];
        for(var i = 0; i < 12; i++) {
                manifest.push({
                        src:'images/'+ "ico"+(i+1)+".png",
                        id:'ico' + i
                })
        }
        queue.loadManifest(manifest);
        queue.on('complete',function(){
                initItem();     
        });
        return queue;
})();

//开始项目
function initItem() {
        var wid = window.innerWidth * 2;
        var high = window.innerHeight * 2;
        $('#stage').attr('width', wid);
        $('#stage').attr('height', high);
        $('#stage').css({
                'width': wid / 2,
                'height': high / 2
        });
        //加载场景
        var stage = new createjs.Stage('stage');
        createjs.Touch.enable(stage);

        //背景图片
        (function() {
                var bgmap = new createjs.Bitmap(loader.getResult('bg'));
                bgmap.scaleX = wid / bgmap.getBounds().width;
                bgmap.scaleY = high / bgmap.getBounds().height;
                stage.addChild(bgmap);
        })();

        //开始放图标按钮
        (function() {
                var initBtn = new createjs.Bitmap(loader.getResult('btnInit'));
                var props = initBtn.getBounds();
                initBtn.scaleY = initBtn.scaleX = wid / props.width / 5;
                var _width = props.width * initBtn.scaleX;
                var _height = props.height * initBtn.scaleX;
                initBtn.x = wid - _width;
                initBtn.y = high - _height;

                stage.addChild(initBtn);
        })();

        //各个图标
        (function() {
                var closeMenu = loader.getResult('closeMenu');
                var container = new createjs.Container();
                var currIcon = null;
                for(var i = 0; i < 12; i++) {
                        var icon = new createjs.Bitmap(loader.getResult('ico'+i));
                        var props = icon.getBounds();
                        icon.scaleY = icon.scaleX = wid / props.width / 6;
                        var _width = props.width * icon.scaleX;
                        var _height = props.height * icon.scaleX;
                        icon.x = (i % 6) * _width;
                        if(i / 6 >= 1) {
                                icon.y = _height * 2;
                        } else {
                                icon.y = _height;
                        }
                        container.addChild(icon);
                        icon.regX = _width/2;
                        icon.regY = _height/2;
                        icon.on('pressmove', function(e) {
                                this.x = e.stageX;
                                this.y = e.stageY - high + _width * 3;
                                currIcon = this;
                        });
                }
                container.y = high - _width * 3;
                stage.addChild(container);

                var hammer = new Hammer(document.querySelector("body"));
                hammer.get('pinch').set({ enable: true });
                hammer.get('rotate').set({ enable: true });
                var oldScale = 0;
                var oldSize = 0;
                hammer.on('pinchstart',function(e){
                        oldScale = e.Scale;
                        oldSize = currIcon.scaleX;
                });
                hammer.on('pinch',function(e){
                        $('#text').text(e.scale - oldScale);
                        if((e.scale - oldScale)>0){
                                currIcon.scaleY = currIcon.scaleX = currIcon.scaleX + 0.05;
                                
                        }else{
                                currIcon.scaleY = currIcon.scaleX = currIcon.scaleX - 0.05;
                                _width = _width - _width*0.05;
                                
                        }
                        
                        oldScale = e.scale;
                });
                var oldRot = 0;
                hammer.on('rotatestart',function(e){
                        oldRot = e.rotation;
                })
                hammer.on('rotate',function(e){
                        $('#text').text(e.rotation);
                        currIcon.rotation += e.rotation - oldRot;
                        oldRot = e.rotation;
                });
        })();

        createjs.Ticker.addEventListener("tick", function() {
                stage.update();
        });
};
